<template>
    <!-- 11深加工信息 -->

    <table style="width:100%;font-size: 15px;">
        <tr>
            <td>
                <h2>深加工信息</h2>

            </td>
            <td> <el-button @click="addworkteam">设置</el-button></td>
        </tr>

        <tr>
            <td>班组：{{ workteam.workTeamName }}</td>
            <td>负责人：{{ workteam.leader }}</td>
        </tr>



    </table>
    <!-- 养殖信息 对话框 -->
    <el-dialog v-model="dialogVisible" title="养殖信息" width="500" :before-close="handleClose">
        <span>

            <el-form :model="workteam" label-width="120px">
                <el-form-item label="班组">
                    <el-input v-model="workteam.workTeamName" />
                </el-form-item>
                <el-form-item label="负责人">
                    <el-input v-model="workteam.leader" />
                </el-form-item>



            </el-form>



        </span>
        <template #footer>
            <div class="dialog-footer">

                <el-button type="primary" @click="UpdateWorkteam">
                    保存
                </el-button>
            </div>
        </template>
    </el-dialog>
    <br>

    <h5>食品安全信息</h5>
    <hr />
    <el-upload v-model:file-list="fileList" action="http://localhost:5240/api/SourceList/Upload"
        list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove"
        :on-success="handleAvatarSuccess">
        <el-icon>
            <Plus />
        </el-icon>
    </el-upload>

    <el-dialog v-model="dialogVisibleimages">
        <img w-full :src="dialogImageUrl" alt="Preview Image" />
    </el-dialog>

    <h5>供应商信息</h5>
    <hr />
    <h6>原料</h6>
    <el-button style="float: right;" @click="addmaterialinfo">设置</el-button>

    <h6>生产批次：<span v-if="supplierinfo.productCode">{{ supplierinfo.productCode }} </span>
    </h6>

    <el-dialog v-model="dialogVisiblesupplierinfo" title="养殖信息" width="500" :before-close="handleClose">
        <span>

            <el-form :model="supplierinfo" label-width="120px">
                <el-form-item label="生产批次号">
                    <el-input v-model="supplierinfo.productCode" />
                </el-form-item>



            </el-form>



        </span>
        <template #footer>
            <div class="dialog-footer">

                <el-button type="primary" @click="UpdateSupplierinfo">
                    保存
                </el-button>
            </div>
        </template>
    </el-dialog>


</template>

<script setup lang="ts">
import { ref, inject, onMounted } from 'vue'
import { ElMessage, ElMessageBox, formItemValidateStates } from 'element-plus';
import { useRouter, useRoute } from 'vue-router'
import { type AxiosStatic } from 'axios'


import { Plus } from '@element-plus/icons-vue'

import type { UploadProps, UploadUserFile } from 'element-plus'


const dialogVisible = ref(false)

const axios = inject('axios') as AxiosStatic
const router = useRouter()
const route = useRoute()
const dialogVisibleBusiness = ref(false)//设置养殖信息企业信息对话框
const id = route.query.id;

//生命周期函数
onMounted(() => {
    GetWorkteam()
    GetImgList(5)
    GetSupplierinfo()
})

//深加工班组信息对象
const workteam = ref({
    //  "workTeamId": 0,
    "sourceId": 0,
    "workTeamName": "",
    "leader": "",
    // "addName": "",
    // "addDateTime": ""
})
//反填班组信息
const GetWorkteam = () => {
    //获取数据
    axios.get('SourceList/GetWorkteam?id=' + id).then((res) => {
        console.log(res.data)
        if (res.data.data != null) {
            workteam.value = res.data.data
        }

    })
}

//深加工弹框显示
const addworkteam = () => {
    dialogVisible.value = true
}


//设置班组信息
const UpdateWorkteam = () => {
    workteam.value.sourceId = id
    axios.post('SourceList/UpdateWorkteam', workteam.value).then((res) => {
        if (res.data.data == 1) {
            ElMessage({
                message: '保存成功',
                type: 'success',
            })
            dialogVisible.value = false
            GetWorkteam()
        }
        else {
            ElMessage.error("保存失败")
            return;
        }
    })
}

//关闭弹框
const handleClose = (done: () => void) => {
    ElMessageBox.confirm('确定要关闭吗？')
        .then(() => {
            done()
        })
        .catch(() => {

        })
}

//反填食品安全信息图片 
//图片上传方法
const handleAvatarSuccess = (val: any) => {
    imagesinfo.value.url = val//
    AddImages(5)
}

const dialogVisibleimages = ref(false)
const fileList = ref([])

const GetImgList = (val: any) => {
    //获取数据
    axios.get('SourceList/GetImgList', {
        params: {
            SourceId: id,
            TraceType: 1,
            ImgType: val,
        }
    }).then((res) => {
        //  console.log(res.data)
        if (res.data.data != null) {

            //  imagesList.value = res.data.data
            //  dialogImageUrl.value = res.data.data
            res.data.data.forEach((item: any) => {
                fileList.value.push({
                    name: 'http://localhost:5240' + item.url,
                    url: 'http://localhost:5240' + item.url,
                    id: item.id
                })



            })
        }
        console.log(fileList.value)
    })

}

//移除图片
const handleRemove = (val: any) => {
    DelImages(val.id)//动检证删除
}

//添加图片表
const imagesinfo = ref({
    //  "id": 0,
    "sourceId": 0,
    "traceType": 0,
    "imgType": 0,
    "url": ""
})
const AddImages = (val: any) => {
    imagesinfo.value.sourceId = id;
    imagesinfo.value.traceType = 1;
    imagesinfo.value.imgType = val;

    axios.post('/SourceList/AddImages', imagesinfo.value).then(res => {
        if (res.data.code == 1) {
            ElMessage({
                message: '保存成功',
                type: 'success',
            })

            dialogVisible.value = false
            GetWorkteam()
        } else {
            ElMessage.error('添加失败')
            return;

        }
    })
}
//图片删除
const DelImages = (val: any) => {
    axios.post('/SourceList/DelImages?id=' + val).then(res => {
        if (res.data.data == 1) {
            ElMessage({
                message: '删除成功',
                type: 'success',
            })
            GetWorkteam()//刷新页面
        } else {
            ElMessage.error('删除失败')
            return;

        }
    })
}
const dialogImageUrl = ref('')
const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
    dialogImageUrl.value = uploadFile.url!
    dialogVisibleimages.value = true
}


//供应商信息-原料信息反填
const supplierinfo = ref({
    // "materialId": 0,
    "sourceId": 0,
    "productCode": "",
    // "addName": "",
    // "addDateTime": ""
})


const GetSupplierinfo = () => {
    //获取数据
    axios.get('SourceList/GetSupplierinfo?id=' + id).then((res) => {
        console.log(res.data)
        if (res.data.data != null) {
            supplierinfo.value = res.data.data
        }

    })
}
const dialogVisiblesupplierinfo = ref(false)
const addmaterialinfo = () => {
    dialogVisiblesupplierinfo.value = true
}
//供应商信息-原料信息保存
const UpdateSupplierinfo = () => {
    supplierinfo.value.sourceId = id;
    axios.post('/SourceList/UpdateSupplierinfo', supplierinfo.value).then(res => {
        if (res.data.data == 1) {
            ElMessage({
                message: '保存成功',
                type: 'success',
            })
            dialogVisiblesupplierinfo.value = false
            GetWorkteam()
        } else {
            ElMessage.error('添加失败')
            return;

        }
    })
}

//供应商信息-原料信息关闭弹框
const handleCloseSupplierinfo = (done: () => void) => {
    ElMessageBox.confirm('确定要关闭吗？')

}





</script>